<template>
  <!-- 选择银行弹窗 -->
  <div class="deposit_sm_modal">
    <nut-overlay :no-footer="true" :onClosed="listenClose" v-model:visible="showBankModal"
      :overlay-style="{ backgroundColor: 'rgba(0, 0, 0, .5)' }">
      <div class="form_card">
        <div class="form_container vertical">
          <div class="header rel center">
            <span class="weight_5 ">{{ t('paymentManagement_page_chBank') }}</span>
            <span class="close abs center pointer ">
            </span>
          </div>
          <div class="body vertical center  body_sec">
<!--            <nut-input @click.stop="onCloseBank" @input="handleInput" v-model="bankName"
              :placeholder="t('deposit_page_inputBank')">
              <template #right>
                <a class="refresh_icon search_icon"></a>
              </template>
            </nut-input>-->
            <div class="input_box">
              <input class="nut-input" :placeholder="t('deposit_page_inputBank')" @click.stop="onCloseBank" @input="handleInput" />
              <a class="refresh_icon search_icon"></a>
            </div>
            <div class="bank_list">
              <div :class="`bank_item ${item.status === 0 ? 'wh_item' : ''}`" v-for="(item, index) in bkList"
                @click="clickBank(item)" :key="index">
                <div v-if="item.status === 0" class="bank_wh">
                  <iconpark-icon class="close mr-4" icon-id="weihuzhong" size="1rem"></iconpark-icon>
                  <span>{{ t('addBank_page_bank_wh') }}</span>
                </div>
                <span class="bank_l_icon">
                  <ImgT :src="`/imgs/bankIcon/bank_logo_${item.value}.webp`" :alt="item.label" />
                </span>
                <span class="bank_l_name"> {{ item.label }} </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nut-overlay>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, onUnmounted } from 'vue';
import { useI18n } from "vue-i18n";
// import { Net } from '@/net/Net';
import H5Websocket from "@/net/Net1";
import { MessageEvent2 } from '@/net/MessageEvent2';
import { NetPacket } from '@/netBase/NetPacket';
import { NetMsgType } from '@/netBase/NetMsgType';
import {throttleAction} from "@/utils/publicMethods.ts";

const props = defineProps({
  isDepositBank: {
    type: Boolean,
    default: () => false
  },
})
const emit = defineEmits(['selectBank']);
const { t } = useI18n();
const showBankModal = ref(false);
// const bankName = ref();
// 所有银行列表
const bkList = ref<any>([]);
const originBkList = ref<any>([]);

const onCloseBank = () => {
  // console.log('----', showBankModal.value)
  showBankModal.value = true
}
const getBankList = () => {
  const req = NetPacket.req_bank_name_list();
  // Net.instance.sendRequest(req);
  H5Websocket.sendMessageHandler(req);
};
const handleBankList = (res: any) => {
  console.log('------aaaa', res)
  // 添加银行维护状态，0 维护，1 开启
  const newArr = res.bank_name_list.map((item: any, index: number) => {
    return {
      value: item.bank_id,
      label: item.bank_name,
      status: res.status_list[index]
    }
  });
  bkList.value = newArr.sort((a: any, b: any) => {
    return b.status - a.status
  });
  originBkList.value = [...bkList.value];
}
// 充值单独用的银行列表
const getDepositBankList = () => {
  const req = NetPacket.req_pay_name_list();
  // Net.instance.sendRequest(req);
  H5Websocket.sendMessageHandler(req);
}
// 充值获取的银行列表
const handleBankAllList = (res: any) => {
  console.log('------bbb', res)
  const curBankArr: any = [];
  res.pay_name_list.map((item: any) => {
    bkList.value.map((ite: any) => {
      if (ite.value === item.pay_id) {
        curBankArr.push({
          ...ite,
          label: item.pay_name
        })
      }
    })
    // return {
    //   value: item.pay_id,
    //   label: item.pay_name
    // }
  });
  bkList.value = curBankArr.sort((a: any, b: any) => {
    return b.status - a.status
  });
  originBkList.value = [...bkList.value];
}
// 输入字符串匹配银行
const handleInput = (v: any) => {
  throttledUpdate(v.target.value)
}
const throttledUpdate = throttleAction((value: any) => {
  if (value) {
    const newArr: any = [];
    originBkList.value.map((item: any) => {
      const str = item.label
      const reg = new RegExp(value, 'i')
      const isHas = str.match(reg)
      if (isHas) {
        newArr.push(item)
      }
    })
    bkList.value = newArr
  } else {
    bkList.value = [...originBkList.value]
  }
}, 300);

// 选择银行
const clickBank = (e: any) => {
  // if (e.status === 0) return;
  showBankModal.value = false;
  emit('selectBank', e)
}

// 监听关闭回调
const listenClose = () => {
  showBankModal.value = false;
}

onMounted(() => {
  getBankList();
  if (props.isDepositBank) {
    getDepositBankList();
  } else {
    // getBankList();
  }
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_req_bank_name_list, handleBankList);
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_req_pay_name_list, handleBankAllList);
})
onUnmounted(() => {
  // 取消监听
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_req_bank_name_list, null);
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_req_pay_name_list, null);
});

defineExpose({
  onCloseBank
});

</script>

<style lang="scss" scoped>
.deposit_sm_modal {

  // 弹窗重置样式
  :deep(.nut-overlay) {
    z-index: 99999 !important;
    top: 0;
    //background: #27155c;
    //width: 100%;
    //height: 76%;
    //bottom: -38%;
    //top: auto;
    //border-radius: 0;
    //.nut-dialog {
    //  width: 100%;
    //  padding: 14px 30px 0 !important;
    //
    //  .nut-dialog__content {
    //    width: 100%;
    //    margin: 0;
    //    max-height: none;
    //    padding: 0 !important;
    //  }
    //}
  }

  .form_card {
    position: absolute;
    color: #fff;
    font-size: 16px;
    background: #100E26;
    width: 100%;
    height: 76%;
    bottom: 0;
    top: auto;
    border-radius: 0;
    padding: 16px 14px 0 !important;

    .form_container {
      height: 100%;
    }

    .header {
      text-align: left;
    }

    .body {
      height: 100%;

      .input_box {
        position: relative;
        :deep(.nut-input) {
          height: 40px;
          margin: 14px 0 18px;
          background: #1D1C3C;
          border: 1px solid #333260;
          border-radius: 8px;
          padding: 7px 40px 7px 8px;
        }

        .refresh_icon {
          position: absolute;
          display: inline-block;
          width: 24px;
          height: 24px;
          background: url(/imgs/payment/search_icon.webp) center no-repeat;
          background-size: 100%;
          right: 8px;
          top: 8px;
        }
      }
    }
  }

  // 选择银行
  .bank_list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    max-height: 80%;
    overflow-y: auto;

    .bank_item {
      position: relative;
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 12px;
      width: 168px;
      height: 44px;
      margin-bottom: 12px;
      background: #1D1C3C;
      border: 1px solid #333260;
      border-radius: 8px;


      &:not(:nth-child(2n+1)) {
        margin-left: 11px;
      }

      &:active {
        transform: scale(.95);
      }

      &.wh_item {
        pointer-events: none;
      }

      .bank_wh {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        background: rgba(0, 0, 0, .7);
        width: 100%;
        height: 100%;
        border-radius: 8px;
      }

      .bank_l_icon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        margin-left: 6px;
        border-radius: 50%;
        background: #fff;

        img {
          width: 18px;
          border-radius: 50%;
        }
        &::after {
          content: '';
          position: absolute;
          width: 1px;
          height: 29px;
          background: rgba(168, 168, 202, 0.2);
          right: -7px;
        }
      }

      .bank_l_name {
        max-width: 105px;
        margin-left: 14px;
      }
    }
  }
}
</style>
